<template>
	<view class="store-page">
		<scroll-view scroll-y="true" :show-scrollbar="false" class="content">
			<!-- 顶部栏 -->
			<view class="return-page">
				<view class="header-box">
					<text class="textTop">附近门店</text>
				</view>
			</view>

			<!-- 门店 -->
			<view class="storeContent-box">
				<!-- 定位、地图 -->
				<view class="location-box">
					<view class="map-box">
						<map class="mapEN" :latitude="latitude" :longitude="longitude" :markers="covers">
						</map>
					</view>

				</view>

				<!-- 酒 -->
				<view class="wineInformation-box">
					<view class="wineModule-box" v-for="(i,index) in 3" :key="index">
						<view class="wineTop">
							<image class="wineImage" src="../../static/uni.png" mode="aspectFill"></image>
							<view class="jiangjiu-box">
								<p class="pText">吉宏酱酒</p>
								<text class="textFont">吉宏酱酒“新人首购"买一送五活动</text>
								<view class="location_info">
									<view class="infoLeft">
										<image class="location_icon" src="../../static/tabBarIcon/gouwuche.png"
											mode="aspectFit"></image>
										<text class="val">已售： 12</text>
									</view>
									<view class="kmNUmber">0.8km</view>
								</view>
							</view>
						</view>
						<view class="wineBottom">
							<view class="bottoLeft">
								<image class="location_icon" src="../../static/tabBarIcon/navigation.png"
									mode="aspectFit"></image>
								<text class="val">成都市高新区</text>
							</view>
							<image class="rightIcon" src="../../static/tabBarIcon/导航.png" mode="aspectFit"></image>
						</view>
					</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				listArea: []
			}
		},
		onLoad() {
			uni.request({
				url: 'http://192.168.0.14:8080/exam/getAreaList',
				method: 'GET',
				data: {
					token: 123,
				},
				list: [{
					area: '',
					id: '',
					pageNum: '',
					pageSize: ''
				}],
				success: (res) => {
					this.listArea = res.data
					console.log(this.listArea);
				},
				fail: (err) => {
					console.log(err);
				},
				complete: () => {
					console.log('请求完成');
				}
			})
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		max-height: calc(100vh);
		overflow: hidden;

		// 顶部栏
		.return-page {
			width: 750rpx;
			height: 176rpx;
			background-color: darkred;
			position: fixed;
			left: 0rpx;
			top: 0rpx;
			z-index: 100;

			.header-box {
				padding: 0rpx 30rpx;
				position: absolute;
				bottom: 10rpx;

				.textTop {
					font-size: 30rpx;
					color: white;
					font-weight: bold;
					line-height: 60rpx;
					letter-spacing: 5rpx;
				}
			}
		}

		// 门店
		.storeContent-box {
			height: calc(100vh);
			margin-top: 176rpx;
			padding: 24rpx 30rpx;

			// 定位、地图
			.location-box {
				width: 100%;
				height: 500rpx;
				background-color: bisque;

				.map-box {
					width: 100%;

					.mapEN {
						width: 100%;
						height: 500rpx;
					}
				}
			}

			// 酒
			.wineInformation-box {
				margin-top: 24rpx;

				.wineModule-box {
					margin-bottom: 20rpx;
					width: 100%;
					box-sizing: border-box;
					padding: 20rpx;
					background-color: white;
					border-radius: 16rpx;

					.wineTop {
						border-bottom: 2rpx dashed #999999;
						display: flex;

						.wineImage {
							flex-shrink: 0;
							margin-right: 20rpx;
							width: 120rpx;
							height: 100rpx;
							border-radius: 16rpx;
						}

						.jiangjiu-box {
							width: 100%;

							.pText {
								font-size: 28rpx;
								font-weight: bold;
								color: firebrick;
							}

							.textFont {
								font-size: 24rpx;
								color: #999999;
							}

							.location_info {
								color: #999999;
								display: flex;
								align-items: center;
								line-height: 70rpx;

								.infoLeft {
									margin-right: auto;

									.location_icon {
										width: 28rpx;
										height: 28rpx;
										vertical-align: middle;
										margin-right: 5rpx;
									}

									.val {
										font-size: 20rpx;
									}
								}

								.kmNUmber {
									font-size: 20rpx;
								}
							}
						}
					}

					.wineBottom {
						margin-top: 20rpx;
						display: flex;
						align-items: center;

						.bottoLeft {
							margin-right: auto;
							display: flex;
							align-items: center;

							.location_icon {
								width: 28rpx;
								height: 28rpx;
								vertical-align: middle;
								margin-right: 5rpx;
							}

							.val {
								font-size: 24rpx;
								color: #999999;
							}
						}

						.rightIcon {
							width: 32rpx;
							height: 32rpx;
							margin-left: 48rpx;
						}
					}
				}
			}
		}

	}
</style>